<template>
  <div class="vue-power-drag clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/xiongcaihu/vue-power-drag">https://github.com/xiongcaihu/vue-power-drag</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-power-drag <br>
            <br>
            import drag from 'vue-power-drag'<br>
            components:{<br>
              &nbsp;&nbsp;'vue-power-drag':drag<br>
            }
          </code>
        </div>
      </el-card>
      <div class="container clearfix">
        <power-drag ref="cyGridster" :your-list="myList" :base-margin-left="baseMarginLeft" :base-margin-top="baseMarginTop" :base-width="baseWidth"
            :base-height="baseHeight">
            <template v-for="(item,index) in myList" :slot="'slot'+index">
                <span :key="index">{{index}}</span>
            </template>
        </power-drag>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import drag from 'vue-power-drag'

export default {
  name: 'VuePowerDrag',
  components: {
    'power-drag': drag
  },
  data () {
    return {
      myList: [
        {
          'id': 1,
          'x': 10,
          'y': 1,
          'sizex': 3,
          'sizey': 2
        }, {
          'id': 2,
          'x': 8,
          'y': 1,
          'sizex': 2,
          'sizey': 2
        }, {
          'id': 4,
          'x': 1,
          'y': 1,
          'sizex': 1,
          'sizey': 1
        }, {
          'id': 6,
          'x': 4,
          'y': 1,
          'sizex': 2,
          'sizey': 1
        }, {
          'id': 8,
          'x': 6,
          'y': 1,
          'sizex': 2,
          'sizey': 1
        }, {
          'id': 10,
          'x': 2,
          'y': 1,
          'sizex': 2,
          'sizey': 2
        }, {
          'id': 3,
          'x': 6,
          'y': 2,
          'sizex': 1,
          'sizey': 1
        }, {
          'id': 5,
          'x': 4,
          'y': 2,
          'sizex': 2,
          'sizey': 1
        }, {
          'id': 7,
          'x': 1,
          'y': 2,
          'sizex': 1,
          'sizey': 1
        }, {
          'id': 9,
          'x': 7,
          'y': 2,
          'sizex': 1,
          'sizey': 1
        }
      ],
      baseWidth: 50,
      baseHeight: 50,
      baseMarginLeft: 10,
      baseMarginTop: 10
    }
  },
  methods: {
    getList () {
      let gridster = this.$refs['cyGridster'] // 获取gridster实例
      console.log(JSON.stringify(gridster.getList()))
    }
  },
  mounted () {
    let gridster = this.$refs['cyGridster'] // 获取gridster实例
    gridster.init() // 在适当的时候初始化布局组件
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-power-drag{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
    .container{
      width: 100%;
      height: 300px;
    }
    .page-text{
      width: 50px;
      height: 50px;
      background: #ccc;
    }
  }
}
</style>
